<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>
  </head>
  <body>
    <div id="app">
      <btn-a @to-dad="res=$event"></btn-a>
      <div>------------------------------------------------------- </div>
      <div>子组件计算的结果是：<span>{{res}}</span></div>
    </div>
    <script src="./vue.js"></script>
    <script>
      Vue.component("btn-a", {
        template: `<div><input type="text"     v-model.number="num1">+
        <input type="text" v-model.number="num2">
        <button @click=sum>=</button>
        <span>{{res}}</span></div>`,
        data() {
          return {
            num1:"",
            num2:"",
            res:""
          };
        },
        methods:{
          sum(){
            this.res=this.num1+this.num2
            this.$emit("to-dad",this.res)
          }
        }
      });
      const vm = new Vue({
        el: "#app",
        data: {
          res:" "
        },
        methods: {
           
        },
      });
    </script>
  </body>
</html>
